<script setup lang="ts">
import { ref } from 'vue'

const active = ref(0)
</script>

<template>
  <div class="notify-page">
    <!-- nav组件 -->
    <van-nav-bar title="发现" fixed>
      <template #right>
        <van-icon name="chat-o" dot size="26" />
      </template>
    </van-nav-bar>

    <!-- 大家在测 -->
    <div class="not-test">
      <div class="not-test-nav">
        <h4>大家在测</h4>
        <p>更多测试 <span>></span></p>
      </div>
      <!--  -->
      <div class="not-test-content">
        <van-row class="not-test-content-row">
          <!-- 左 -->
          <van-col span="12">
            <router-link to="/article/doctor" class="left">
              <van-row class="min">
                <p>性格测试</p>
                <h5>测一测你的幸福感</h5>
              </van-row>
              <van-row class="min">
                <div class="min-footer">
                  <p class="p1">1.1 万人测过</p>
                  <p>共 18 题</p>
                </div>
                <div class="min-img"><img src="@/assets/cheshi.jpg" alt="" /></div>
              </van-row>
            </router-link>
          </van-col>
          <!-- 右 -->
          <van-col span="11">
            <div class="right">
              <van-row>
                <router-link to="/article/doctor" class="min">
                  <h5>两性知识自测</h5>
                  <p>7392 人测过</p>
                </router-link>
              </van-row>
              <van-row>
                <router-link to="/article/doctor" class="min">
                  <h5>测测与 TA 的激情度</h5>
                  <p>2732 人测过</p>
                </router-link>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>

    <!-- 图片 -->
    <router-link to="/article/doctor">
      <div class="notify-img">
        <img src="@/assets/notify-img.jpg" alt="" />
      </div>
    </router-link>
    <!-- 导航栏 -->
    <van-tabs v-model:active="active" shrink sticky>
      <van-tab title="大家在聊">
        <van-empty image="search" description="暂无聊天" />
      </van-tab>
      <van-tab title="关注">
        <van-empty description="还没有关注哦！" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.notify-page {
  padding: 0 14px;
  padding: 46px 14px 80px;
  .van-nav-bar {
    margin-bottom: 10px;
  }
  .not-test {
    .not-test-nav {
      height: 44px;
      width: 100%;
      z-index: 999;
      display: flex;
      align-items: center;
      h4 {
        font-size: 16px;
      }
      p {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        font-size: 14px;
        line-height: 44px;
        color: #666;
        span {
          padding-left: 5px;
          font-family: 楷体;
        }
      }
    }

    .not-test-content {
      .not-test-content-row {
        display: flex;
        justify-content: space-between;
        .left {
          display: block;
          width: 100%;
          height: 120px;
          background-color: #f5f3fe;
          border-radius: 7px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .min {
            p {
              font-size: 12px;
              color: #666;
            }

            h5 {
              font-size: 15px;

              padding: 5px 0;
            }
            .min-footer {
              .p1 {
                margin-bottom: 8px;
              }
            }
          }
          .min-img {
            width: 38px;
            height: 46px;
            margin-left: 36px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right {
          width: 100%;
          height: 120px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .min {
            height: 55px;
            width: 100%;
            background-color: #f5f3fe;
            padding: 8px;
            padding-left: 12px;
            border-radius: 7px;
            h5 {
              font-size: 15px;
              font-weight: 600;

              margin-bottom: 5px;
            }
            p {
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
  }
  .notify-img {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;

    border-radius: 7px;
    margin-top: 12px;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
